<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5G机动网管 - 网络质量评估与优化</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
        }
        .header {
            background: linear-gradient(135deg, #1a2a6c, #2b6cb0);
            color: white;
            padding: 1rem 2rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .logo-icon {
            font-size: 2rem;
        }
        #map-container {
            display: flex;
            height: calc(100vh - 120px);
        }
        #map {
            height: 100%;
            width: 75%;
            z-index: 1;
        }
        .control-panel {
            width: 25%;
            background-color: white;
            padding: 20px;
            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
            overflow-y: auto;
        }
        .stat-card {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }
        .progress {
            height: 8px;
            margin-top: 5px;
        }
        .legend {
            padding: 10px;
            background: white;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .legend-item {
            display: flex;
            align-items: center;
            margin: 5px 0;
        }
        .legend-color {
            width: 20px;
            height: 20px;
            margin-right: 8px;
            border-radius: 3px;
        }
        .tooltip-icon {
            font-size: 1.2rem;
            margin-right: 8px;
            color: #2b6cb0;
        }
        .footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            background-color: #1a2a6c;
            color: white;
            text-align: center;
            padding: 10px;
            font-size: 0.9rem;
        }
        .filters {
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="logo">
        <div class="logo-icon">📶</div>
        <div>
            <h2>5G机动网管 - 网络质量评估与优化</h2>
            <p>基于MR数据的小区覆盖质量诊断报告</p>
        </div>
    </div>
</div>

<div id="map-container">
    <div id="map"></div>

    <div class="control-panel">
        <div class="filters">
            <h5>数据筛选</h5>
            <div class="mb-3">
                <label for="timeRange" class="form-label">时间段</label>
                <select class="form-select" id="timeRange">
                    <option value="today">今日 (9:00-18:00)</option>
                    <option value="peak">高峰时段 (17:00-20:00)</option>
                    <option value="offpeak">空闲时段 (00:00-06:00)</option>
                </select>
            </div>

            <div class="mb-3">
                <label class="form-label">RSRP范围 (dBm)</label>
                <div class="d-flex justify-content-between">
                    <span>-120</span>
                    <span id="rsrpValue">-110</span>
                    <span>-70</span>
                </div>
                <input type="range" class="form-range" min="-120" max="-70" value="-110" id="rsrpFilter">
            </div>

            <button class="btn btn-primary w-100">应用筛选</button>
        </div>

        <div class="stat-card">
            <h5><span class="tooltip-icon">📊</span>网络质量统计</h5>
            <p>平均RSRP: <strong>-82 dBm</strong></p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" style="width: 65%;"></div>
            </div>
            <p>弱覆盖占比: <strong>12.8%</strong> (RSRP < -105 dBm)</p>
            <div class="progress">
                <div class="progress-bar bg-warning" role="progressbar" style="width: 12.8%;"></div>
            </div>
            <p>高干扰占比: <strong>5.3%</strong> (SINR < 0 dB)</p>
            <div class="progress">
                <div class="progress-bar bg-danger" role="progressbar" style="width: 5.3%;"></div>
            </div>
        </div>

        <div class="stat-card">
            <h5><span class="tooltip-icon">🔧</span>优化建议</h5>
            <p>1. <strong>天安门广场西北侧</strong>需增加微基站覆盖</p>
            <p>2. <strong>长安街沿线</strong>需调整天线俯仰角</p>
            <p>3. <strong>王府井商圈</strong>需PCI重新规划减少干扰</p>
            <button class="btn btn-outline-primary mt-2">生成详细报告</button>
        </div>

        <div class="stat-card">
            <h5><span class="tooltip-icon">📍</span>区域覆盖评分</h5>
            <table class="table table-sm">
                <thead>
                <tr>
                    <th>区域</th>
                    <th>覆盖评分</th>
                    <th>状态</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>金融街</td>
                    <td>92/100</td>
                    <td><span class="badge bg-success">优秀</span></td>
                </tr>
                <tr>
                    <td>王府井</td>
                    <td>78/100</td>
                    <td><span class="badge bg-primary">良好</span></td>
                </tr>
                <tr>
                    <td>西单</td>
                    <td>85/100</td>
                    <td><span class="badge bg-primary">良好</span></td>
                </tr>
                <tr>
                    <td>天安门</td>
                    <td>66/100</td>
                    <td><span class="badge bg-warning">待优化</span></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="footer">
    © 2023 5G网络优化系统 | 基于MR数据的智能诊断平台 | 数据更新时间: 2023-10-26 15:30
</div>

<!-- 引入必要的库 -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.heat/0.2.0/leaflet-heat.js"></script>
<script>
    // 初始化地图 - 以北京为中心
    const map = L.map('map').setView([39.904, 116.407], 13);

    // 添加高德地图作为底图
    L.tileLayer('https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
        attribution: '© 高德地图'
    }).addTo(map);

    // 定义颜色范围
    function getColorByRSRP(rsrp) {
        return rsrp > -85 ? '#4CAF50' :   // 优秀 - 绿色
            rsrp > -95 ? '#FFC107' :   // 良好 - 黄色
                rsrp > -105 ? '#FF9800' :  // 一般 - 橙色
                    '#F44336';   // 差 - 红色
    }

    // 模拟基站数据
    const baseStations = [
        {id: 'BS001', lat: 39.904, lng: 116.407, azimuth: 60, tilt: 8, pci: 125, power: 40, rsrp: -83},
        {id: 'BS002', lat: 39.913, lng: 116.397, azimuth: 120, tilt: 10, pci: 240, power: 42, rsrp: -78},
        {id: 'BS003', lat: 39.899, lng: 116.417, azimuth: 300, tilt: 6, pci: 187, power: 38, rsrp: -88},
        {id: 'BS004', lat: 39.908, lng: 116.425, azimuth: 190, tilt: 7, pci: 95, power: 41, rsrp: -91},
        {id: 'BS005', lat: 39.922, lng: 116.402, azimuth: 45, tilt: 9, pci: 342, power: 39, rsrp: -86}
    ];

    // 添加基站扇区方向图
    baseStations.forEach(bs => {
        // 创建自定义扇形标记
        L.circleMarker([bs.lat, bs.lng], {
            radius: 8,
            fillColor: getColorByRSRP(bs.rsrp),
            color: "#000",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8
        }).addTo(map).bindPopup(`基站 ID: ${bs.id}<br>RSRP: ${bs.rsrp} dBm<br>PCI: ${bs.pci}<br>方位角: ${bs.azimuth}°`);

        // 添加扇形覆盖区域
        const sector = createSector([bs.lat, bs.lng], 500, 30, bs.azimuth - 30, bs.azimuth + 30);
        sector.addTo(map).setStyle({
            fillColor: getColorByRSRP(bs.rsrp),
            color: "#000",
            opacity: 0.3,
            fillOpacity: 0.1
        }).bindTooltip(`基站 ${bs.id} 覆盖区域`);
    });

    // 创建扇形函数
    function createSector(center, radius, numVertices, startAngle, endAngle) {
        const points = [];
        points.push(center);

        for (let i = 0; i <= numVertices; i++) {
            const angle = startAngle + (endAngle - startAngle) * i / numVertices;
            const angleRad = angle * Math.PI / 180;
            const dx = radius * Math.sin(angleRad);
            const dy = radius * Math.cos(angleRad);
            points.push([center[0] + dy/150, center[1] + dx/150]);
        }

        points.push(center);
        return L.polygon(points, {fill: true});
    }

    // 模拟生成1000个MR数据点
    const mrPoints = [];
    for (let i = 0; i < 1000; i++) {
        // 在北京市区范围内生成随机点
        const lat = 39.89 + Math.random() * 0.07;
        const lng = 116.38 + Math.random() * 0.08;

        // 模拟RSRP值：-70到-115 dBm之间
        const rsrp = Math.floor(Math.random() * 46) - 115;
        mrPoints.push([lat, lng, rsrp]);
    }

    // 添加热力图 - RSRP分布
    const heatLayer = L.heatLayer(mrPoints, {
        radius: 20,
        blur: 15,
        gradient: {
            0.1: '#4CAF50', // -70 dBm
            0.4: '#FFC107', // -85 dBm
            0.7: '#FF9800', // -95 dBm
            1.0: '#F44336'  // -110 dBm
        },
        maxZoom: 17
    }).addTo(map);

    // 模拟弱覆盖点（RSRP < -105 dBm）
    const weakCoveragePoints = mrPoints.filter(p => p[2] < -105).slice(0, 50);

    // 添加弱覆盖标记
    weakCoveragePoints.forEach(point => {
        L.circleMarker([point[0], point[1]], {
            radius: 6,
            color: "#F44336",
            fillColor: "#F44336",
            opacity: 0.8,
            fillOpacity: 0.5
        }).addTo(map).bindPopup(`弱覆盖区域<br>RSRP: ${point[2]} dBm`);
    });

    // 模拟TA数据点（离基站不同距离）
    const taPoints = [];
    for (let i = 0; i < 200; i++) {
        const base = baseStations[Math.floor(Math.random() * baseStations.length)];

        // 随机生成距离基站100-1500米的点
        const distance = 100 + Math.random() * 1400;
        const angle = Math.random() * 360;
        const angleRad = angle * Math.PI / 180;
        const dx = distance * Math.sin(angleRad) / 111000;
        const dy = distance * Math.cos(angleRad) / 111000;

        const lat = base.lat + dy;
        const lng = base.lng + dx;
        const ta = Math.ceil(distance / 78); // 1 TA ≈ 78米

        taPoints.push([lat, lng, ta]);
    }

    // 添加TA标记点
    taPoints.forEach(point => {
        L.circleMarker([point[0], point[1]], {
            radius: 4,
            color: "#2196F3",
            fillColor: "#2196F3",
            opacity: 0.6,
            fillOpacity: 0.3
        }).addTo(map).bindPopup(`TA值: ${point[2]}<br>距离: ~${Math.round(point[2]*78)}米`);
    });

    // 在基站周围添加TA圈
    baseStations.forEach(bs => {
        // 在基站周围画三个圈表示不同TA值
        for (let i = 1; i <= 3; i++) {
            const radius = i * 500; // 每个圈半径增加500米
            L.circle([bs.lat, bs.lng], {
                radius: radius,
                color: i === 1 ? '#2196F3' : '#3F51B5',
                opacity: 0.5,
                fill: false,
                dashArray: "5, 10"
            }).addTo(map).bindTooltip(`TA${i}圈 (${radius}米)`);
        }
    });

    // 添加图例
    const legend = L.control({ position: 'bottomleft' });
    legend.onAdd = function() {
        const div = L.DomUtil.create('div', 'legend');
        div.innerHTML = `
                <h5>覆盖质量图例</h5>
                <div class="legend-item">
                    <div class="legend-color" style="background-color:#4CAF50"></div>
                    <span>优秀 (> -85dBm)</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color" style="background-color:#FFC107"></div>
                    <span>良好 (-85 ~ -95dBm)</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color" style="background-color:#FF9800"></div>
                    <span>一般 (-95 ~ -105dBm)</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color" style="background-color:#F44336"></div>
                    <span>差 (< -105dBm)</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color" style="background-color:#2196F3"></div>
                    <span>TA测量点</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color" style="background-color:#9C27B0"></div>
                    <span>弱覆盖点</span>
                </div>
            `;
        return div;
    };
    legend.addTo(map);

    // 筛选器交互处理
    document.getElementById('rsrpFilter').addEventListener('input', function(e) {
        document.getElementById('rsrpValue').textContent = e.target.value;
    });
</script>
</body>
</html>